<template>
  <div>
      <van-button :loading="true"  @click="say" size="large" type="success">
      <template #icon>
        <div>
            <van-icon  color="red" size="40" name="like"></van-icon>
        </div>
      </template>
        你好
         <template #loading>
        <div>
            <van-icon color="red" size="40" name="fire"></van-icon>
        </div>
      </template>
      </van-button>

      <van-btt type="success" size="large">
          世界
      </van-btt>
       <van-radio name="1">单选框 1</van-radio>
       <van-form 
       ref="myform"  >
        <!-- van-cell-group 单元格 -->
          <van-cell-group >
            <!-- van-field 输入框组件 -->
            <van-field
           
             name="username"
              label="用户名："
              v-model="username"
              :rules="usernamerul"
             ></van-field>
            <hr>
             <van-field 
               name="password"
              v-model="password"
              :rules="passwordrul"
                label="密码："
             ></van-field>
       
          </van-cell-group>
            <van-button type="primary" 
            @click="toSubmit"
            >提交</van-button>

       </van-form>
       <button @click="chufa">触发表单的提交方法</button>

  </div>
</template>

<script>
// ui组件库的使用
// 掌握安装和配置  
// ui组件  
  // 1) 组件属性 可以帮助改变样式和功能
  // 2) 组件的事件  组件的事件上默认形参 是经常需要的数据
  // 3) 插槽     组件提供默认插槽和具名插槽 修改组件的某个部分的内容
  // 4) 方法     获取组件后 调用的方法 来完成某些功能

import vanBtt from './vanButton'
export default {
  name: '2209vueIndex',
  components:{vanBtt},
  data() {
    return {
      username:"",
      password:"",
        usernamerul:[
          {message:'必填姓名',required:true,
        trgger:'submit'}
        ],
        passwordrul:[
          { required: true, message: "请填写密码" },
          {message:'密码不符合规则',pattern:/^\w{6,8}$/,trgger:'submit'}
        ] 
      
    };
  },

  mounted() {
    
  },

  methods: {
    say(tab){
      console.log(tab.index)
    },
     toSubmit(){
      // vantui 验证单个表单 或 一部分
      // 获取组件 调用方法
      // vantui 使用navtive-type="submit"
      // 自动触发表单验证
     this.$refs.myform.validate('password').then(vali=>{
        console.log("通过")
     }).catch(err=>{
        console.log("未通过")
     })
      
  
   
    },
    chufa(){
      // 触发表单的提交方法
      this.$refs.myform.submit()
    }
  },
};
</script>
<style lang="less" scoped>
// 修改ui组件库的样式击穿  
//  /deep/
 .van-icon-fire{
    color:green !important;
  }
  /deep/ .van-radio__label{
    color:red;
  }

</style>